<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入 bootstrap 样式表 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <style>
      body {
        padding-top: 50px;
      }
    </style>
  </head>

  <body>
    <!-- 栅格系统 -->
    <div class="container">
      <div class="d-flex justify-content-between align-items-center">
        <h1>图书管理</h1>
        <button
          class="btn btn-success btn-sm"
          data-bs-toggle="modal"
          data-bs-target="#addModal"
        >
          添加
        </button>
      </div>
      <table
        class="table table-bordered table-striped table-dark table-hover text-center"
      >
        <thead>
          <!-- 表头行 -->
          <tr>
            <th scope="col">Id</th>
            <th scope="col">书名</th>
            <th scope="col">作者</th>
            <th scope="col">出版社</th>
            <th scope="col">操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 表格中的每一行 -->
          <!-- <tr>
            <th scope="row">xxx</th>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>
              <button type="button" class="btn btn-link btn-sm btn-delete">
                删除
              </button>
              <button type="button" class="btn btn-link btn-sm btn-update">
                编辑
              </button>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="addModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="addForm" class="p-3">
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="addBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- add Modal -->
    <div class="modal fade" id="editModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">编辑图书</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <form id="editForm" class="p-3">
              <input type="hidden" name="id" />
              <!-- 书名 -->
              <div class="mb-3">
                <label class="form-label">书名</label>
                <input
                  type="text"
                  name="bookname"
                  class="form-control"
                  placeholder="请输入图书名称"
                  name="bookname"
                />
              </div>
              <!-- 作者 -->
              <div class="mb-3">
                <label class="form-label">作者</label>
                <input
                  type="text"
                  name="author"
                  class="form-control"
                  placeholder="请输入作者名字"
                  name="author"
                />
              </div>
              <!-- 出版社 -->
              <div class="mb-3">
                <label class="form-label">出版社</label>
                <input
                  type="text"
                  name="publisher"
                  class="form-control"
                  placeholder="请输入出版社名称"
                  name="publisher"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              取消
            </button>
            <button type="button" class="btn btn-primary" id="editBtn">
              确认
            </button>
          </div>
        </div>
      </div>
    </div>
    <script src="./lib/axios.js"></script>
    <!-- 快速获取表单数据  key=value {key:value}  -->
    <script src="./lib/form-serialize.js"></script>
    <!-- bootstrap的js -->
    <script src="./lib/bootstrap.min.js"></script>
    <script>
    //这是我在码云上的更改
// 过去十八岁没戴表
// 不过有时间
// 够我没有后顾 野性贪玩
// 霎眼廿七岁 时日无多
// 方不敢偷懒
// 宏愿纵未了 奋斗总不太晚
// 然后突然今秋
// 望望身边 应该有 已尽有
// 我的美酒跑车相机金表
// 也讲究
// 直到世间个个也妒忌
// 仍不怎么富有
// 用我尚有换我没有
// 其实已用尽所拥有
// 曾付出 几多心跳
// 来换取一堆堆的发票
// 人值得 命中减少几秒
// 多买一只表
// 秒速 捉得紧了
// 而皮肤竟偷偷松了
// 为何用到尽了
// 至知哪样紧要
// 劳力是无止境
// 活着多好 不需要靠物证
// 也不以高薪高职高级品
// 搏尊敬 no
// 就算搏到伯爵那地位
// 和肖邦的隽永
// 卖了任性 日拼夜拼
// 忘掉了为甚麼高兴
// 曾付出 几多心跳
// 来换取一堆堆的发票
// 人值得 命中减少几秒
// 多买一只表
// 秒速 捉得紧了
// 而皮肤竟偷偷松了
// 为何用到尽了
// 至知哪样紧要
// 记住那关于光阴的教训
// 回头走 天已暗
// 你献出了十寸时和分
// 可有换到十寸金
// 还剩低 几多心跳
// 人面跟水晶表面对照
// 连自己亦都分析不了
// 得到多与少
// 也许真的疯了
// 那个倒影 多麼可笑
// 灵魂若变卖了
// 上链也没心跳
// 银或金 都不紧要
// 谁造机芯 一样了
// 计划了 照做了 得到了
// 时间却太少 no...
// 还剩低 几多心跳
// 还在数 赶不及了
// 昂贵是这刻 我觉悟了
// 在时计里 看破一生
// 渺渺

      axios.defaults.baseURL = "http://ajax-api.itheima.net";
      async function render() {
        const res = await axios.get("/api/books");
        document.querySelector("tbody").innerHTML = res.data.data
          .map((item) => {
            const { author, bookname, publisher, id } = item;
            return `
            <tr>
              <th scope="row">${id}</th>
              <td>${bookname}</td>
              <td>${author}</td>
              <td>${publisher}</td>
              <td>
                <button type="button" data-id=${id} class="btn btn-link btn-sm btn-delete">
                  删除
                </button>
                <button type="button" data-id=${id} class="btn btn-link btn-sm btn-update">
                  编辑
                </button>
              </td>
            </tr>
            `;
          })
          .join("");
      }
      render();
      //添加
      const addModal = new bootstrap.Modal(document.querySelector("#addModal"));
      document.querySelector("#addBtn").addEventListener("click", async () => {
        const data = serialize(
          document.querySelector("#addForm", { hash: true })
        );
        const res = await axios.post("/api/books", data);
        if (res.status === 201) {
          document.querySelector("#addForm").reset();
          addModal.hide();
          render();
        }
      });
      //删除

      const editModal = new bootstrap.Modal(
        document.querySelector("#editModal")
      );
      document.querySelector("tbody").addEventListener("click", async (e) => {
        if (e.target.classList.contains("btn-delete")) {
          const res1 = await axios.delete(`/api/books/${e.target.dataset.id}`);
          if (res1.status === 204) {
            alert("删除成功");
            render();
          }
        }
        if (e.target.classList.contains("btn-update")) {
          editModal.show();
          const res2 = await axios.get(`/api/books/${e.target.dataset.id}`);
          console.log(res2);
          const { author, bookname, id, publisher } = res2.data.data;
          document.querySelector("#editModal [name=bookname]").value = bookname;
          document.querySelector("#editModal [name=author]").value = author;
          document.querySelector("#editModal [name=publisher]").value =
            publisher;
          document.querySelector("#editModal [name=id]").value = id;
        }
      });
      //编辑图书
      document.querySelector("#editBtn").addEventListener("click", async () => {
        const data = serialize(document.querySelector("#editForm"), {
          hash: true,
        });
        const id = data.id;
        delete data.id;
        const res = await axios.put(`/api/books/${id}`, data);
        editModal.hide();
        render();
      });
    </script>
  </body>
</html>
